<!DOCTYPE HTML>
<html>
    <head>
        <!--Source: https://github.com/matthewlein/jQuery-jSlots-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sổ Xố - Trung Thu</title>
        <link rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" media="screen" title="no title">
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title">
        <script src="jquery.min.js"></script>
        <script src="jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="jquery.jSlots.js" type="text/javascript"></script>
    </head>
    <body style="background-color: black">
        <div id="wrapper">
            <div id="content">
                <div class="fancy">
                    <ul class="slot slot1">
                        <!-- In reverse order so the 7s show on load -->
                        <li><span>0</span></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>
                        <li><span>4</span></li>
                        <li><span>5</span></li>
                        <li><span>6</span></li>
                        <li><span>7</span></li>
                    </ul>
                    <ul class="slot slot2">
                        <!-- In reverse order so the 7s show on load -->
                        <li><span>0</span></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>
                        <li><span>4</span></li>
                        <li><span>5</span></li>
                        <li><span>6</span></li>
                        <li><span>7</span></li>
                        <li><span>8</span></li>
                        <li><span>9</span></li>
                    </ul>
                    <ul class="slot slot3">
                        <!-- In reverse order so the 7s show on load -->
                        <li><span>0</span></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>
                        <li><span>4</span></li>
                        <li><span>5</span></li>
                        <li><span>6</span></li>
                        <li><span>7</span></li>
                        <li><span>8</span></li>
                        <li><span>9</span></li>
                    </ul>
                    <br/>
                    <input type="button" id="playFancy1" value="Trăm">
                    <input type="button" id="playFancy2" value="Chục" style="margin: 0 200px">
                    <input type="button" id="playFancy3" value="Đơn Vị">
                </div>
            </div>
        </div>
        <script type="text/javascript">
            
            v_times = 10000;
            v_loops = 7;
            
            arr_winter = new Array;
            arr_winter[1] = 1;
            arr_winter[2] = 2;
            arr_winter[3] = 3;
            arr_winter[4] = 4;
            arr_winter[5] = 5;
            arr_winter[6] = 6;
            arr_winter[7] = 7;
            arr_winter[8] = 8;
            arr_winter[9] = 9;
            arr_winter[10] = 10;
            
            $('.fancy .slot1').jSlots({
                number : 1,
                winnerNumber : arr_winter,
                spinner : '#playFancy1',
                easing : 'easeOutSine',
                time : v_times,
                loops : v_loops,
                onStart : function() {
                    
                    $('.slot1').removeClass('winner')
                    .find('li:nth-child(1)').html('<span>0</span>');
                },
                onWin : function(winCount, winners, finalNumbers) {
                    $.each(winners, function() {
                        this.addClass('winner');
                    });

                    if ( winCount === 1 ) {
                    } else if ( winCount > 1 ) {
                    }
                }
            });
            
            $('.fancy .slot2').jSlots({
                number : 1,
                winnerNumber : arr_winter,
                spinner : '#playFancy2',
                easing : 'easeOutSine',
                time : v_times,
                loops : v_loops,
                onStart : function() {
                    $('.slot2').removeClass('winner')
                    .find('li:nth-child(1)').html('<span>0</span>');
                },
                onWin : function(winCount, winners, finalNumbers) {
                    $.each(winners, function() {
                        this.addClass('winner');
                    });

                    if ( winCount === 1 ) {
                    } else if ( winCount > 1 ) {
                    }
                }
            });
            
            $('.fancy .slot3').jSlots({
                number : 1,
                winnerNumber : arr_winter,
                spinner : '#playFancy3',
                easing : 'easeOutSine',
                time : v_times,
                loops : v_loops,
                onStart : function() {
                    $('.slot3').removeClass('winner')
                    .find('li:nth-child(1)').html('<span>0</span>');
                },
                onWin : function(winCount, winners, finalNumbers) {
                    $.each(winners, function() {
                        this.addClass('winner');
                    });

                    if ( winCount === 1 ) {
                    } else if ( winCount > 1 ) {
                    }
                }
            });
            
            $('.slot').find('li:nth-child(1)').html('<span>_</span>');
        </script>
    </body>
</html>